<template>
  <div>
    <el-card>
      <div slot="header">关键字搜索</div>
      <div class="content">
        <div class="main">
          <el-row :gutter="10">
            <!--  左图 -->
            <el-col :span="18">
              <div>
                <div class="title">搜索用户数</div>
                <div class="count">
                  {{ searchData.totalUser | numberFormat }}
                </div>
                <div class="view">
                  <v-chart :options="getOptions(true)" autoresize></v-chart>
                </div>
              </div>
            </el-col>
            <!-- 右图 -->
            <el-col :span="6">
              <div>
                <div class="title">搜索量</div>
                <div class="count">
                  {{ searchData.totalSearch | numberFormat }}
                </div>
                <div class="view">
                  <v-chart :options="getOptions(false)" autoresize></v-chart>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="排名" width="80">
            </el-table-column>
            <el-table-column prop="word" label="关键字" width="width">
            </el-table-column>
            <el-table-column prop="count" label="搜索数量" width="width">
            </el-table-column>
            <el-table-column prop="user" label="搜索用户数" width="width">
            </el-table-column>
            <el-table-column prop="percent" label="搜索占比" width="width">
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="page = $event"
            style="text-align:center;margin:20px 0"
            :current-page="page"
            :page-size="limit"
            layout="prev, pager, next,total"
            :total="searchWord.length"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "SearchView",
  data() {
    return {
      page: 1,
      limit: 5
    };
  },
  computed: {
    ...mapState({
      searchWord: state => state.echarts.echartsData.searchWord || []
    }),
    searchData() {
      if (this.searchWord) {
        let searchWords = this.searchWord.map(item => {
          return item.word;
        });
        let searchUsers = this.searchWord.map(item => {
          return item.user;
        });
        let searchCounts = this.searchWord.map(item => {
          return item.count;
        });
        let totalUser = searchUsers.reduce((p, c) => {
          p += c;
          return p;
        }, 0);
        let totalSearch = searchCounts.reduce((p, c) => {
          p += c;
          return p;
        }, 0);

        this.searchWord.forEach(
          item =>
            (item.percent = ((item.count * 100) / totalSearch).toFixed(2) + "%")
        );

        return {
          searchWords,
          searchUsers,
          searchCounts,
          totalUser,
          totalSearch
        };
      } else {
        return {};
      }
    },
    // 计算分页数据
    tableData() {
      return this.searchWord.slice(
        (this.page - 1) * this.limit,
        this.page * this.limit
      );
    }
  },
  methods: {
    getOptions(flag) {
      let { searchWords, searchUsers, searchCounts } = this.searchData;
      return {
        grid: {
          left: 0,
          top: 0,
          bottom: 0,
          right: 0
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          show: false,
          data: searchWords || []
        },
        yAxis: {
          show: false
        },
        series: {
          type: "line",
          data: flag ? searchUsers : searchCounts,
          itemStyle: {
            opacity: 0
          },
          areaStyle: {
            color: "hotpink"
          },
          smooth: TextTrackCue
        },
        color: "skyblue"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 14px;
  color: #aaa;
}
.count {
  font-size: 24px;
  letter-spacing: 1px;
}
.view {
  height: 50px;
  width: 100%;
}
.table {
  height: 350px;
}
</style>
